<template>
    <div>
    <el-row>
    用户名:
    <el-input
    placeholder="请输入用户名"
    v-model="input"
    clearable>
    </el-input>
    邮箱：
    <el-input
    placeholder="请输入邮箱"
    v-model="input"
    clearable>
    </el-input>
    </el-row>
    <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    </el-row>
    <rl-row>
        <el-button type="primary" :disabled="single" @click="handleUpdate">编辑用户</el-button>
        <el-button type="info" :disabled="single">会员设置</el-button>
        <el-button type="danger" :disabled="multiple">封禁</el-button>
    </rl-row>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="创建日期"
      sortable
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="220">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="220">
    </el-table-column>
    <el-table-column
      prop="identity"
      label="身份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="integral"
      label="积分"
      width="55">
    </el-table-column>
    <el-table-column
      prop="state"
      label="封禁状态"
      width="55">
    </el-table-column>
    </el-table>
    <!-- 修改或添加弹框 -->
    <el-dialog :title="title" :visible.sync="open" :append-to-body="true" width="500px">
    <el-from label-width="120px" ref="tableData" :model="tableData">
      <el-from-item label="日期" prop="date">
        <!-- 日期：<el-input v-model="tableData.date" /> -->
        日期:
        <el-date-picker
        v-model="tableData.date"
        type="date"
        placeholder="选择日期">
    </el-date-picker>
      </el-from-item>
      <el-from-item label="用户名" prop="name">
        用户名：<el-input  v-model="tableData.name" />
      </el-from-item>
      <el-from-item label="邮箱" prop="email">
        邮箱：<el-input  v-model="tableData.email" />
      </el-from-item>
      <el-from-item label="密码" prop="password">
        密码：<el-input  v-model="tableData.password" />
      </el-from-item>
      <el-from-item label="身份" prop="identity">
        身份：<el-input  v-model="tableData.email" />
      </el-from-item>
      <el-from-item label="积分" prop="integral">
        积分：<el-input  v-model="tableData.integral" />
      </el-from-item>
      <el-from-item label="封禁" prop="state">
        封禁：<el-input  v-model="tableData.state" />
      </el-from-item>
    </el-from>
    <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
    </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2020-08-23',
        name: 'admin',
        email: '123456@qq.com',
        password: '12345',
        identity: '会员',
        integral: '10',
        state: '否'
      }],
      open: false,
      title: '',
      single: true,
      multiple: true
      // sexOptions: [
      //   {
      //     value: '0',
      //     label: '女'
      //   },
      //   {
      //     value: '1',
      //     label: '男'
      //   }
      // ],
      // stateOptions: [
      //   {
      //     value: '0',
      //     label: '否'
      //   },
      //   {
      //     value: '1',
      //     label: '是'
      //   }
      // ],
      // identity: [
      //   {
      //     value: '0',
      //     label: '普通用户'
      //   },
      //   {
      //     value: '1',
      //     label: '会员'
      //   }
      // ]
    }
  },
  methods: {
    handleUpdate () {
      this.open = true
      this.title = '修改信息'
    },
    cancel () {
      this.open = false
    },
    submitFrom () {
      this.open = false
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      // this.ids = selection.map(item => item.postId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
  }
}
</script>
